<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>微信支付</title>{include file="public/header" /}
    <style>
        .howmuch {
            /*text-shadow: 1px 1px 2px rgba(0,0,0,1);*/
        }
        
        .bottomssss {
            padding-bottom: constant(safe-area-inset-bottom);
            position: fixed;
            left: 10px;
            right: 10px;
            bottom: 10px;
        }
        
        .weui-grids {
            background-color: #fff;
            -webkit-border-radius: 10px;
            border: none;
        }
        
        .weui-grids:after {
            border: none;
        }
        
        .weui-grids:before {
            border: none;
        }
        
        .weui-grid:after {
            border: none;
        }
        
        .weui-grid:before {
            border: none;
        }
        
        .weui-grid {
            border-bottom: 1px solid #f5f5f5;
            padding: 10px;
        }
        
        .weui-grid:nth-child(3n+2) {
            border-left: 1px solid #f5f5f5;
            border-right: 1px solid #f5f5f5;
        }
        
        .weui-grid:nth-last-child(1),
        .weui-grid:nth-last-child(2),
        .weui-grid:nth-last-child(3) {
            border-bottom: none;
        }
        
        .weui-grid__label {
            font-size: 24px;
        }
    </style>
    <div class="vue_box" v-cloak>
        <div class="weui-cells__title" style="margin-left:15px;color:#999;font-size:16px;">请选择微信</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div id="money" class="weui-input howmuch" style="font-size:32px;color:#000;">{{showMoney}}</div>
                </div>
                <div class="weui-cell__ft"> <i class="iconfont icon-delete" style="font-size:32px;color:#111" onclick="doReset()"></i>

                </div>
            </div>
            <a href="/web/mine" class="weui-cell weui-cell_link">
                <div class="weui-cell__bd">放弃支付，立即返回</div>
            </a>
        </div>
        <div class="bottomssss">
            <div class="weui-grids">
                <a href="javascript:btn_click(1)" class="weui-grid js_grid">
                    <p class="weui-grid__label">1</p>
                </a>
                <a href="javascript:btn_click(2)" class="weui-grid js_grid">
                    <p class="weui-grid__label">2</p>
                </a>
                <a href="javascript:btn_click(3)" class="weui-grid js_grid">
                    <p class="weui-grid__label">3</p>
                </a>
                <a href="javascript:btn_click(4)" class="weui-grid js_grid">
                    <p class="weui-grid__label">4</p>
                </a>
                <a href="javascript:btn_click(5)" class="weui-grid js_grid">
                    <p class="weui-grid__label">5</p>
                </a>
                <a href="javascript:btn_click(6)" class="weui-grid js_grid">
                    <p class="weui-grid__label">6</p>
                </a>
                <a href="javascript:btn_click(7)" class="weui-grid js_grid">
                    <p class="weui-grid__label">7</p>
                </a>
                <a href="javascript:btn_click(8)" class="weui-grid js_grid">
                    <p class="weui-grid__label">8</p>
                </a>
                <a href="javascript:btn_click(9)" class="weui-grid js_grid">
                    <p class="weui-grid__label">9</p>
                </a>
                <a href="javascript:btn_click('.')" class="weui-grid js_grid">
                    <p class="weui-grid__label">.</p>
                </a>
                <a href="javascript:btn_click(0)" class="weui-grid js_grid">
                    <p class="weui-grid__label">0</p>
                </a>
                <a id="ok" href="javascript:btn_click('ok')" class="weui-grid js_grid" style="background: -webkit-linear-gradient(#333, #000);">
                    <p class="weui-grid__label" style="color:#fff">支付</p>
                </a>
            </div>
        </div>
    </div>{include file="public/footer_js" /}
    <script>
        VUE_APP = new Vue({
            el: ".vue_box",
            data: {
                money: 0,
                showMoney: '0',
                hasDot: false,
                btn_text: '支付',
                floatCount: 0,
            },
            created: function() {
                wx.ready(function() {});
                this.getData();
            },
            methods: {
                getData: function() {}
            }
        });

        function doReset() {
            VUE_APP.money = 0;
            VUE_APP.showMoney = '0';
            VUE_APP.hasDot = false;
            VUE_APP.btn_text = '支付';
            VUE_APP.floatCount = 0;
        }

        function doAddOrder() {
            if (VUE_APP.money <= 0) {
                doReset();
                alert("请输入支付金额！");
            } else {
                VUE_APP.btn_text = '...'
                $.ajax({
                    url: "",
                    data: {
                        money: VUE_APP.money
                    },
                    success: function(result) {
                        console.log(result);
                        if (result.code == 200) {
                            //订单创建成功 调用微信支付
                            wxPay(result.data);
                        } else {
                            VUE_APP.btn_text = '支付';
                            alert(result.msg);
                        }
                    },
                    error: function(error) {
                        VUE_APP.btn_text = '支付';
                        alert("支付失败，请稍候再试！");
                    }
                });
            }
        }

        function wxPay(wxPayData) {
            // alert(JSON.stringify(wxPayData));
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', wxPayData,
                function(res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        alert("微信支付成功！");
                        location.href = '/web/mine/order';
                        return;
                    } else {
                        alert("微信支付失败！");
                        location.replace(location.href);
                    }
                });
        }

        function btn_click(btnName) {
            switch (btnName) {
                case ".":
                    if (VUE_APP.hasDot) {
                        return false;
                    } else {
                        VUE_APP.hasDot = true;
                        if (VUE_APP.showMoney == '0') {
                            // if the number is 0 or null , fix it.
                            VUE_APP.showMoney = "0.";
                        } else {
                            // if not , add the number behind the old number
                            VUE_APP.showMoney = VUE_APP.showMoney + ".";
                        }
                    }
                    break;
                case 'ok':
                    // click ok then do this
                    VUE_APP.money = parseFloat(VUE_APP.money);
                    VUE_APP.showMoney = VUE_APP.money.toFixed(2);
                    doAddOrder();
                    return;
                    break;
                case '...':
                    return;
                default:
                    if (VUE_APP.hasDot) {
                        if (VUE_APP.floatCount >= 2) {
                            return;
                        }
                        VUE_APP.floatCount++;
                    }
                    // others number , just add it.
                    if (VUE_APP.showMoney == "0") {
                        VUE_APP.showMoney = btnName;
                    } else {
                        VUE_APP.showMoney = VUE_APP.showMoney + "" + btnName;
                    }
            }
            VUE_APP.money = parseFloat(VUE_APP.showMoney);
            if (VUE_APP.money.toString().split(".").length == 2) {
                // if the number has float dot behind.
                if (VUE_APP.money.toString().split(".")[1].length > 2) {
                    // if the lenght of the number is out of 2, delete it.
                    VUE_APP.money = VUE_APP.money.toFixed(2);
                }
            }
        }
    </script>
    </body>

</html>